<template>
  <scroll-view :scroll-y="true" class="h-11/12 m-auto w-11/12">
    <uni-forms :modelValue="formData">
      <!-- 食物名称 -->
      <uni-card title="食物名称" extra="必填*">
        <uni-forms-item>
          <uni-easyinput v-model="formData.shiWuMingCheng" />
        </uni-forms-item>
      </uni-card>
      <!-- 食物脱离恰当温度控制时的初始温度 -->
      <uni-card title="食物脱离恰当温度控制时的初始温度" extra="必填*">
        <uni-forms-item>
          <uni-easyinput
            v-model="formData.shiWuTuoLiQiaDangWenDuKongZhiShiDeChuShiWenDu"
          />
        </uni-forms-item>
      </uni-card>
      <!-- 热/冷食 -->
      <uni-card title="热/冷食" extra="必填*">
        <uni-forms-item>
          <uni-data-checkbox
            v-model="formData.reHuoLengShi"
            :localdata="reHuoLengShi"
          />
        </uni-forms-item>
      </uni-card>
      <!-- 展示时间 -->
      <uni-card title="展示时间" extra="必填*">
        <uni-forms-item>
          <view
            @click="zhanShiShiJianDatesPop = true"
            class="border-solid border-gray-300 flex items-center justify-between rounded h-10 border"
          >
            <text class="float-left ml-3">{{ formData.zhanShiShiJian }}</text>
            <uni-icons
              class="float-right font-bold"
              type="arrow-down"
              size="18"
            ></uni-icons>
          </view>
        </uni-forms-item>
      </uni-card>
      <!-- 服务结束/丢弃时间 -->
      <uni-card title="服务结束/丢弃时间" extra="必填*">
        <uni-forms-item>
          <view
            @click="diuQiShiJianDatesPop = true"
            class="border-solid border-gray-300 flex items-center justify-between rounded h-10 border"
          >
            <text class="float-left ml-3">{{ formData.diuQiShiJian }}</text>
            <uni-icons
              class="float-right font-bold"
              type="arrow-down"
              size="18"
            ></uni-icons>
          </view>
        </uni-forms-item>
      </uni-card>
      <!-- 填报人姓名 -->
      <uni-card title="填报人姓名" extra="必填*">
        <uni-forms-item>
          <uni-easyinput v-model="formData.tianBaoRenXingMing" />
        </uni-forms-item>
      </uni-card>
    </uni-forms>
    <ConfigComponent
      @clearFormData="clearFormData"
      @updateFormData="updateFormData"
      :formData="formData"
      name="shiJianKongZhi"
    />
  </scroll-view>
  <!-- 展示时间组件 -->
  <Dates
    v-model:selectedTime="formData.zhanShiShiJian"
    @timeSelected="handleZhanShiShiJian"
    @popType="zhanShiShiJianDatesPop = $event"
    v-if="zhanShiShiJianDatesPop"
  />
  <!-- 丢弃时间组件 -->
  <Dates
    v-model:selectedTime="formData.diuQiShiJian"
    @timeSelected="handleDiuQiShiJian"
    @popType="diuQiShiJianDatesPop = $event"
    v-if="diuQiShiJianDatesPop"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import Dates from '@/components/Dates/Dates.vue';
import ConfigComponent from '@/components/ConfigComponent/ConfigComponent.vue';

// 表格提交信息
const formData = ref({
  shiWuMingCheng: '', //食物名称
  shiWuTuoLiQiaDangWenDuKongZhiShiDeChuShiWenDu: '', //食物脱离恰当温度控制时的初始温度
  reHuoLengShi: '', //热/冷食
  zhanShiShiJian: '', // 展示时间
  diuQiShiJian: '', // 丢弃时间
  tianBaoRenXingMing: '', // 填报人姓名
});

//热/冷食 数据
const reHuoLengShi = [
  { text: '热食', value: '热食' },
  { text: '冷食', value: '冷食' },
];

// 展示时间
const zhanShiShiJianDatesPop = ref(false);
const handleZhanShiShiJian = (time: string) => {
  zhanShiShiJianDatesPop.value = false;
  formData.value.zhanShiShiJian = time;
};
// 丢弃时间
const diuQiShiJianDatesPop = ref(false);
const handleDiuQiShiJian = (time: string) => {
  diuQiShiJianDatesPop.value = false;
  formData.value.diuQiShiJian = time;
};
// 清空表单数据
const clearFormData = () => {
  formData.value = {
    shiWuMingCheng: '', //食物名称
    shiWuTuoLiQiaDangWenDuKongZhiShiDeChuShiWenDu: '', //食物脱离恰当温度控制时的初始温度
    reHuoLengShi: '', //热/冷食
    zhanShiShiJian: '', // 展示时间
    diuQiShiJian: '', // 丢弃时间
    tianBaoRenXingMing: '', // 填报人姓名
  };
};
// 更新表单数据
const updateFormData = (data: any) => {
  formData.value = data;
};
</script>

<style lang="scss" scoped>
::v-deep.uni-card {
  .uni-card__header {
    .uni-card__header-extra {
      .uni-card__header-extra-text {
        color: #ff0000;
      }
    }
  }
}
</style>
